/*
 * @Author: 肖思汗
 * @Date: 2020-03-20 16:43:46
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-07-17 23:25:47
 */
// react tsx 组件例子
import React from "react";
import styles from "./Beizer.less";
import bezier from "bezier";
import ReactMixinComponent from "@ReactMixinComponent";
import { TransitionVector3 } from "xsh-react-three";


interface Props {
}

interface State {
}

export default class Beizer extends ReactMixinComponent<Props, State> {

    constructor(props: Readonly<Props>) {
        super(props);

        // this.Tvector3.setBezier([0.8, 0, 0.2, 1]);
        // this.Tvector3.setDuration(1000);
        this.Tvector3.setX(0);

    }

    Tvector3 = new TransitionVector3();

    player = setInterval(() => {
        if (this.Tvector3.isDone()) {
            clearInterval(this.player);
        }

    }, 100)

    componentDidMount() {
    }

    componentDidUpdate(prevProps: Props, prevState: State, snapshot: string) {
    }

    // 不写这个生命周期的话 会使用 ReactMixinComponent 中的方法进行简易的判断
    // shouldComponentUpdate(nextProps, nextState, nextContext) {
    //     return super.shouldComponentUpdate(nextProps, nextState, nextContext);
    // }

    componentDidCatch(error: any, errorInfo: any) { }

    componentWillUnmount() {
        clearInterval(this.player);
    }

    render() {

        return (
            <div className={styles.Beizer} >

                {
                    Array.from({ length: 100 }).map((v, i) => {

                        let bezierArray = [0.76, 0.01, 1, 0.37];
                        let xBezier = [0, bezierArray[0], bezierArray[2], 1];
                        let yBezier = [0, bezierArray[1], bezierArray[3], 1];
                        let x = bezier(xBezier, i / 100) * 200;
                        let y = 200 - bezier(yBezier, i / 100) * 200;

                        return (
                            <div
                                key={i}
                                style={{ transform: `translate(${x}px,${y}px)` }}
                                className={styles.bizer_point}
                            ></div>
                        );
                    })

                }

            </div >
        )
    }
}
